<!doctype html>
<html class="no-js fixed-layout" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Amaze UI Admin index Examples</title>
	<meta name="description" content="这是一个 index 页面">
	<meta name="keywords" content="index">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="/assets/i/favicon.png">
	<link rel="apple-touch-icon-precomposed" href="/assets/i/app-icon72x72@2x.png">
	<meta name="apple-mobile-web-app-title" content="Amaze UI" />
	<link rel="stylesheet" href="/assets/css/amazeui.min.css"/>
	<link rel="stylesheet" href="/assets/css/admin.css">
</head>
<body id="body">
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
	以获得更好的体验！</p>
<![endif]-->

<header class="am-topbar am-topbar-inverse admin-header" id="username" th:alt="${username}">
	<div class="am-topbar-brand">
		<strong>NCU 网上通讯录</strong> <small>用户界面</small>
	</div>
	
	<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
	
	<div class="am-collapse am-topbar-collapse" id="topbar-collapse">
		
		<ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
			<li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
			<li class="am-dropdown" data-am-dropdown>
				<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;" th:text="${name}">
					<span class="am-icon-users"></span>  <span class="am-icon-caret-down"></span>
				</a>
				<ul class="am-dropdown-content">
					<li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
					<li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
				</ul>
			</li>
			<!--<li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>-->
		</ul>
	</div>
</header>

<div class="am-cf admin-main">
	<!-- sidebar start -->
	<div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
		<div class="am-offcanvas-bar admin-offcanvas-bar">
			<ul class="am-list admin-sidebar-list">
				<li><a href="/loginPage"><span class="am-icon-home"></span> 首页</a></li>
				<li class="admin-parent"><a class="am-cf" href="/form"><span class="am-icon-file"></span> 修改个人资料 <span class="am-icon-angle-right am-fr am-margin-right"></span></a></li>
				<li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li>
			</ul>
			
			<div class="am-panel am-panel-default admin-sidebar-panel">
				<div class="am-panel-bd">
					<p><span class="am-icon-bookmark"></span> 公告</p>
					<p>时光静好，与君语；细水流年，与君同。—— NCU</p>
				</div>
			</div>
			
			<div class="am-panel am-panel-default admin-sidebar-panel">
				<div class="am-panel-bd">
					<p><span class="am-icon-tag"></span> wiki</p>
					<p>Welcome to NCU online address book</p>
				</div>
			</div>
		</div>
	</div>
	<!-- sidebar end -->
	
	<!-- content start -->
	<div class="admin-content">
		<div class="admin-content-body">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">首页</strong> / <small>查询</small></div>
			</div>
			
			<hr>
			
			<div class="am-g">
				<div class="am-u-sm-12 am-u-md-3">
					<div class="am-form-group">
						<select id="table" data-am-selected="{btnSize: 'sm'}" >
							<option value="id" >根据ID</option>
							<option value="name" >根据用户名</option>
							<option value="year" >根据入学年份</option>
							<option value="major" >根据专业</option>
							<option value="classs" >根据班级查询</option>
						</select>
					</div>
				</div>
				<div class="am-u-sm-12 am-u-md-3">
					<div class="am-input-group am-input-group-sm">
						<input id="input" type="text" class="am-form-field">
						<span class="am-input-group-btn">
							<button class="am-btn am-btn-default" type="button" onclick="queryUsers()">搜索</button>
						</span>
					</div>
				</div>
			</div>
			
			
			<div class="am-g">
				<div class="am-u-sm-12" id="info">
					
					<!-- 用户信息-->
				
				</div>
				<div class="am-u-sm-12" id="userInfo">
				
				</div>
			</div>
		</div>
		
		<footer class="admin-content-footer">
			<hr>
			<p class="am-padding-left">© 2019 AllMobilize, Inc. Licensed under MIT license.</p>
		</footer>
	</div>
	<!-- content end -->

</div>



<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/Util.js"></script>
<script>


	var option="id";

    // select change绑定
    $('#table').change(function () {
         option=$('#table').val();
    });
    
    function queryUsers() {
		
        var input=$('#input').val();
        console.info("input:::"+input);
		
        $.ajax({
			
			type:'POST',
			url:'/userInfo/query/'+option,
            dataType:'JSON',
			data:{
			    "type":option,
				"info":input
			},
			success:function(data){

                var showUser='<table class="am-table am-table-bd am-table-striped admin-content-table">\n' +
                    '            <thead>\n' +
                    '            <tr>\n' +
                    '              <th>ID</th><th>用户名</th><th>专业</th><th>手机号</th><th>入学年份</th>\n' +
                    '            </tr>\n' +
                    '            </thead>\n' +
                    '            <tbody >\n' ;
                var obj=data;

                for (var i in obj){
                    var id=data[i].username;
                    var name=data[i].name;
                    var major=data[i].major;
                    var address=data[i].address;
                    var enYear=data[i].enrollmentYear;

                    showUser+=
                        '          <tr><td id="'+id+'"><button id="'+id+'" type="button"\n' +
                        '  class="show-or-hide">'+id+'</button></td><td>'+name+'</td><td>'+major+'</td><td>'+address+'</td><td><span class="am-badge am-badge-success">'+enYear+'</span></td>\n' +
                        '            </tr>\n';
                    
                }

                showUser+=   '            </tbody>\n' +
                    '          </table>';

                $("#info").html(showUser);
                $('.show-or-hide').click(function () {
                    console.info("tetstsststtsts");
                    $('#info').hide(1000);
                    $('#userInfo').show(1000);
                    $(this).addClass("select");
                    var username=$(this).attr('id');
                    showUserInfo(username);
                    console.info("id:::::::::::::"+username);
                })
		}
		});
    }

    function showUserInfo(username){
		
        $.ajax({
			
            type:'POST',
            url:'/userInfo/query/id',
            dataType:'JSON',
            data:{
                "type":"id",
                "info":username
            },
            success:function(data) {
				
                
                var obj = data;
                for (var i in obj) {
                    var id = data[i].username;
                    var name = data[i].name;
                    var major = data[i].major;
                    var address = data[i].address;
                    var enYear = data[i].enrollmentYear;
                    var paYear = data[i].particularYear;
                    var company = toNull(data[i].company);
                    var city = toNull(data[i].city);
                    var classs = data[i].classs;
                    var email = toNull(data[i].email);

					var showUser = '<div class="am-modal-dialog">\n' +
                        '        <div class="am-modal-hd">详细信息\n' +
                        '           <a href="javascript: open()" class="am-close am-close-spin" data-am-modal-close>&times;</a>\n' +
                        '        </div>\n' +
                        '        <div class="am-modal-bd">\n' +
						'           <hr>' +
						'           <ul>' +
						'               <li>用户ID:</li>' +
						'                  <ul>' +
						'                   <li>'+id+'</li>' +
						'                  </ul>' +
						'               <li>用户名：</li>' +
						'                  <ul>' +
                        '                   <li>'+name+'</li>' +
						'                  </ul>'+
						'               <li>专 业：</li>' +
						'                  <ul>' +
                        '                   <li>'+major+'</li>' +
						'                  </ul>'+
                        '               <li>班 级：</li>' +
                        '                  <ul>' +
                        '                   <li>'+classs+'</li>' +
                        '                  </ul>'+
						'               <li>入学年份：</li>' +
                        '                  <ul>' +
                        '                   <li>'+enYear+'</li>' +
                        '                  </ul>'+
						'               <li>毕业年份：</li>' +
                        '                  <ul>' +
                        '                   <li>'+paYear+'</li>' +
                        '                  </ul>'+
						'               <li>手机号：</li>' +
                        '                  <ul>' +
                        '                   <li>'+address+'</li>' +
                        '                  </ul>'+
						'               <li>城 市：</li>' +
                        '                  <ul>' +
                        '                   <li>'+city+'</li>' +
                        '                  </ul>'+
						'               <li>公 司：</li>' +
                        '                  <ul>' +
                        '                   <li>'+company+'</li>' +
                        '                  </ul>'+
						'               <li>Email</li>' +
                        '                  <ul>' +
                        '                   <li>'+email+'</li>' +
                        '                  </ul>'+
						'           </ul>' +
                        '        </div>\n' +
                        '      </div>';
                }
                $('#userInfo').html(showUser);
            }
		})
	}

	function toNull(s){
        if (s==null)
            return "";
        else
            return s;
	}
    $('.show-or-hide').click(function () {
        console.info("tetstsststtsts");
        showUserInfo();
        $('#info').hide(1000);
        $('#test').show(1000);
    }).addClass("select");
	
	function open() {
        $('#info').show(1000);
        $('#userInfo').hide(1000);
    }
	
</script>
</body>
</html>
